<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test9</title>
    <style>
        div{
            overflow: hidden;
        }
        .div-top{
            margin: 20px;
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
            justify-content: center;
            border: 1px solid black;
            width: 1000px;
            height: 250px;
        }
        .div-center{
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            width: 50%;
            height: 50%;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-1{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            width: 50%;
            height: 50%;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-2{
            margin:0 5px;
            display: flex;
            align-items: center;
            justify-content:center;
            width: 50%;
            height: 50%;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-3{
            margin:0 2px;
            width: 50%;
            height: 50%;
            border: 1px solid black;
        }
        .div{
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
            justify-content: center;
            margin:0 10px;
            width: 50%;
            height: 50%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="div-all" id="div-all">
    <div class="div-top" id="div-top">
        n1
        <div class="div-buttom-top-left-right-1" >n2
            <div class="div-buttom-top-left-right-2" >n3
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
            </div>
            <div class="div-buttom-top-left-right-2" >n3
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
            </div>
        </div>
        <div class="div-center">n5</div>
        <div class="div-buttom-top-left-right-1" >n2
            <div class="div-buttom-top-left-right-2" >n3
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
            </div>
            <div class="div-buttom-top-left-right-2" >n3
                <div class="div-buttom-top-left-right-3" >n4</div>
                <div class="div-buttom-top-left-right-3" >n4</div>
            </div>
        </div>
        <div class="div-buttom-top-left-right-1" >n2
            <div class="div-buttom-top-left-right-2" >n3</div>
            <div class="div-buttom-top-left-right-2" >n3</div>
        </div>
    </div>
</div>
<div class="btn">
    <button type="button">遍历</button>
    <input type="text" id="search_text">
    <button type="button">查询</button>
    <button type="button">删除</button>
    <input type="text" id="add">
    <button type="button">添加到选中节点下</button>
</div>
<script>
    (function(){
        var div_top = document.getElementsByClassName("div-top")[0],
            div_all=document.getElementById("div-all"),
            DF_btn = document.getElementsByTagName("button")[0],
            search_text = document.getElementById("search_text"),
            DF_search = document.getElementsByTagName("button")[1],
            delete_btn = document.getElementsByTagName("button")[2],
            add_text = document.getElementById("add"),
            add_btn = document.getElementsByTagName("button")[3],
            arr = [],/*遍历到的元素依次放在数组里*/
            timer = null,
            flag;/*查找结果自增标识*/

        /*深度优先遍历*/
        function traverseDF(node){
            if(!(node == null)){
                arr.push(node);
                for(var i=0;i<node.children.length;i++){
                    traverseDF(node.children[i]);
                }
            }
        }

        /*颜色变化函数*/
        function changeColor(){
            if(arr.length>0){
                var i = 0;
                arr[i].style.backgroundColor = "green";
                timer = setInterval(function(){
                    if(i<arr.length-1){
                        i++;
                        arr[i-1].style.backgroundColor = "#fff";
                        arr[i].style.backgroundColor = "green";
                    }else{
                        arr[i].style.backgroundColor = "#fff";
                        clearInterval(timer);
                    }
                },500);
            }
        }

        /*查询函数*/
        function search(match){
            if(match == ""){
                alert("请输入查询条件！");
                return false;
            }
            var reg = new RegExp(match,"g");
            if(arr.length>0){
                var i = 0;
                arr[i].style.backgroundColor = "red";
                timer = setInterval(function(){
                    i++;
                    if(i<arr.length){
                        if((arr[i-1].childNodes[0].nodeValue).match(reg)){
                            arr[i-1].style.backgroundColor = "blue";
                            flag++;
                            arr[i].style.backgroundColor = "red";
                        }else{
                            arr[i-1].style.backgroundColor = "#fff";
                            arr[i].style.backgroundColor = "red";
                        }
                    }else{
                        if((arr[i-1].childNodes[0].nodeValue).match(reg)){
                            arr[i-1].style.backgroundColor = "blue";
                            flag++;
                            clearInterval(timer);
                        }else{
                            arr[i-1].style.backgroundColor = "#fff";
                            if(flag == 0){
                                alert("没有找到该值！");
                            }
                            clearInterval(timer);
                        }
                    }
                },500);
            }
        }

        /*改变选中节点的颜色*/
        var selectedDiv = null;   //用于存放被点击的那个div元素
        var divs = document.getElementById("div-all").getElementsByTagName('div');
        for(var i=0;i<divs.length;i++){
            divs[i].onclick = function(e){
                clearColor();
                this.style.backgroundColor = "yellow";
                e.stopPropagation();
                selectedDiv = this;
            }
        }

        /*添加子节点*/
        function addChild(){
            if(selectedDiv == null){
                alert("请先选中一个节点");
                return false;
            }else if(add_text.value.trim() == ""){
                alert("请输入要插入的内容");
                return false;
            }else{
                var new_div = document.createElement("div");
                new_div.innerHTML = add_text.value.trim();
                new_div.className="div";
                selectedDiv.appendChild(new_div);
                clearColor();
                selectedDiv = null;
                /*更新点击元素改变颜色事件*/
                var divs = document.getElementById("div-top").getElementsByTagName('div');
                for(var i=0;i<divs.length;i++){
                    divs[i].onclick = function(e){
                        clearColor();
                        this.style.backgroundColor = "yellow";
                        e.stopPropagation();
                        selectedDiv = this;
                    }
                }
            }
        }

        /*初始化背景颜色*/
        function clearColor(){
            divs = document.getElementById("div-all").getElementsByTagName('div');
            for(var i=0;i<divs.length;i++){
                divs[i].style.backgroundColor = "#fff";
            }
        }

        /*各个变量初始化*/
        function reset(){
            arr = [];
            clearInterval(timer);
            clearColor();
            flag = 0;
        }

        /*给按钮绑定事件*/
        DF_btn.onclick = function(){
            reset();
            traverseDF(div_top);
            changeColor();
        }

        DF_search.onclick = function(){
            var str_search = search_text.value.trim();
            reset();
            traverseDF(div_top);
            search(str_search);
        }

        delete_btn.onclick = function(){
            if(!(selectedDiv == null)){
                selectedDiv.remove();
            }
        }

        add_btn.onclick = function(){
            addChild();
        }

    })();
</script>
</body>
</html>